<template>
  <main class="content">
    <!-- <HomeContent></HomeContent> -->
    <RouterView />
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="pageChange(1)">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="pageChange(2)">识别</van-tabbar-item>
      <van-tabbar-item icon="records-o" @click="pageChange(3)">处罚</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="pageChange(4)">我的</van-tabbar-item>
    </van-tabbar>
  </main>
</template>
<script setup>
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
const router = useRouter()
const route = useRoute()
const active = ref(0)
const pageChange = (val) => {
  switch (val) {
    case 1:
      router.push('/')
      break
    case 2:
      router.push({ path: '/recognitionView', query: { type: 1 } })
      break
    case 3:
      router.push({ path: '/recognitionView', query: { type: 2 } })
      break
    case 4:
      router.push('/setting')
      break
    default:
      router.push('/')
  }
}
onMounted(() => {
  switch (route.name) {
    case 'main':
      active.value = 0
      break
    case 'recognitionView':
      active.value = 1
      break
    case 'setting':
      active.value = 3
      break
    default:
      active.value = 0
  }
})
</script>
<style lang="scss" scoped>
.content {}
</style>
